<div class="modal-header">
  <div class="modal-title">菜单权限分配</div>
</div>

<nz-skeleton [nzLoading]="loading">
  <div nz-row nzGutter="12">
    <div nz-col nzMd="6">
      <nz-input-group [nzSuffix]="suffixIcon">
        <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue" />
      </nz-input-group>
      <ng-template #suffixIcon>
        <i nz-icon nzType="search"></i>
      </ng-template>
      <div class="treeArea" style="margin-top: 8px; max-height: 400px; overflow: auto; border: 1px solid #ddd">
        <ng-template #iconTpl>
          <img style="width: 64px; height: 41px;" src="./assets/svg/nodata.svg">
        </ng-template>
        <nz-empty class="ant-empty-small" *ngIf="nodes.length === 0" [nzNotFoundImage]="iconTpl"></nz-empty>

        <nz-tree #menuTree [nzHideUnMatched]="true" [nzData]="nodes" [nzSearchValue]="searchValue" nzCheckable
          [nzShowLine]="true" [nzDraggable]="false" [nzExpandAll]="false" [nzCheckedKeys]="defaultSelectedKeys"
          (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)" (nzSearchValueChange)="nzEvent($event)">
        </nz-tree>
      </div>
    </div>
    <div nz-col nzMd="18">
      <nz-spin [nzSpinning]="loading2">
        <div style="">
          <label nz-checkbox [(ngModel)]="allChecked" (ngModelChange)="updateAllChecked(true)"
            [nzIndeterminate]="indeterminate">
            全选
          </label>
        </div>
        <br />
        <nz-checkbox-group [(ngModel)]="checkOptionsOne" (ngModelChange)="updateSingleChecked(true)">
        </nz-checkbox-group>
      </nz-spin>
    </div>
  </div>
</nz-skeleton>

<div class="modal-footer">
  <button nz-button type="button" [nzType]="'default'" [nzSize]="'large'" (click)="cancel()">
    取消
  </button>
  <button nz-button type="button" [nzType]="'primary'" [nzSize]="'large'" (click)="ok()" [nzLoading]="http.loading">
    确定
  </button>
</div>
